<template>

  <section class="wrap">
  
    <ul>
  
    
      <li v-for='(items,index) in response'>
  
        <a :href='"resume.html?emplid="+response[index].emplid'>
  
          <div class="top">
            <div class="top-left">
               <img :src="handleImg(response[index].emplid)" alt="">
            </div>
            <div class="top-right">
               <h1 class="title">
                  <span>{{items.name}}</span>  
                  <span>{{items.sex_desc}}</span>  
                  <span>({{items.dept_descr}})</span>  
               </h1> 
               <p class="info">
                 <span>
                   {{items.position_desc}}
                 </span>
               </p>  
            </div>
          </div>


          <div class="bottom">
              <p class="education"><i class="icon-deg"></i><span>学历</span>{{items.school_descr}}</p>
              <p class="face"><i class="icon-politic"></i><span>面貌</span>{{items.political_sta_chn}}</p>
              <p class="born">
                <i class="icon-nation special"></i>
                <span>生日</span>{{items.birthdate | retsetTime}} ({{items.birthdate | retsetAge}})
              </p>
          </div>
  
        </a>
  
      </li>
  
    </ul>
  
  
  
  </section>
</template>

<script>
export default {
  props: ['response'],
  filters: {
    retsetTime(value) {
      let result = value.split(' ')[0]
      return result
    },
    retsetAge(value) {
      let nowTime = new Date().getFullYear();
      let result = nowTime-value.split('-')[0]
      return result
    },

  },
  methods:{
			handleImg : function(emplid){
					var ImgObj = new Image(); //判断图片是否存在  
					ImgObj.src = this.Axios.baseURI + "/img/"+emplid+".png";  
					//没有图片，则返回-1  
					if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {  
						return this.Axios.baseURI +  "/img/"+ emplid+".png";  
					} else {  
						return '/static/imgs/man image.png';
				}  
			},
  },
  computed:{

  }
};
</script>

<style scoped lang='less'>
.wrap {
  margin-top: 10/50rem;
  width: 100%;

  > ul {
    width: 100%;

    li {
      width: 100%;

      > a {
        width: 100%;
        display: block;
        padding: 15/50rem 12rem/50;
        margin-bottom: 10/50rem;
        background-color: #fff;
        box-sizing: border-box;

        .top {
          width: 100%;
          display: flex;
          padding: 0 5rem/50;
          .top-left {
            flex: 2;
            margin-right: 8/50rem;
            img {
              display: block;
              width: 50/50rem;
              height: 50/50rem;
              border-radius: 50%;
            }
          }

          .top-right {
            flex: 10;

            .title {
              font-size: 14/50rem;
              display: flex;
              justify-content: space-between;
              align-items: baseline;
              font-weight: normal;
              span:first-of-type {
                font-size: 20/50rem;
              }
              span:nth-of-type(2) {
                margin-left: -60/50rem;
                color: #999999;
              }
              span:nth-of-type(3) {
                color: #999999;
              }
            }

            .info {
              font-size: 14/50rem;
              padding: 15/50rem 0 8/50rem 0;
              span {
                line-height: 24rem/50;
                color: #333333;
              }
              span:nth-of-type(n + 1) {
                margin-right: 16/50rem;
              }
            }
          }
        }

        .bottom {
          font-size: 15/50rem;
          padding: 2/50rem 5/50rem 0 1.32rem;

          p {
            font-size: 15/50rem;
            padding-bottom: 6/50rem;
            span {
              margin-right: 14/50rem;
              color: #999999;
            }
            i {
              margin-right: 7/50rem;
              font-style: normal;
              color: #999999;
              font-size: 18/50rem;
            }
            i.special {
              font-size: 20/50rem;
              position: relative;
              left: -1rem/75;
              top: 3rem/45;
              margin-right: 5rem/50;
            }
          }

          p:first-of-type {
            border-top: 1px solid #f1f1f1;
            padding-top: 12/50rem;
          }

          p:nth-of-type(2) {
            padding-bottom: 4/50rem;
          }
        }
      }
    }
  }
}
</style>
